import React, {Component} from 'react';
import PropTypes from "prop-types"
import CommentItem from "../comment-item/comment-item";
import "./comment-list.css"

class CommentList extends Component {
    static propTypes = {
        comments: PropTypes.array.isRequired,
        removeContent: PropTypes.func.isRequired
    };

    render() {
        const {comments, removeContent} = this.props;
        const display = this.props.comments.length === 0 ? "block" : "none";
        return (
            <div className="col-md-8">
                <h3 className="reply">评论回复：</h3>
                <h2 style={{display}}>暂无评论，点击左侧添加评论！！！</h2>
                <ul className="list-group">
                    {
                        comments.map((val, index) => (
                            <CommentItem comment={val} key={index} removeContent={removeContent} index={index}/>
                        ))
                    }
                </ul>
            </div>
        );
    }
}

export default CommentList;